{% extends "base.html" %}

{% set current_menu = 'lead' %}
{% set current_page = 'lead_list' %}

{% block title %}线索管理 - 线索列表{% endblock %}

{% block page_title %}{% endblock %}
{% block page_subtitle %}{% endblock %}

{% block content %}
<div class="container mx-auto">
    <!-- 面包屑导航 -->
    <nav class="text-sm breadcrumbs mb-6">
        <ol class="flex items-center space-x-2">
            <li><a href="{{ url_for('main.home') }}" class="text-gray-500 hover:text-gray-700">首页</a></li>
            <li><i class="fas fa-chevron-right text-gray-400 text-xs mx-2"></i></li>
            <li class="text-gray-700">线索管理</li>
        </ol>
    </nav>

    <!-- 统计卡片 -->
    <div class="grid grid-cols-1 md:grid-cols-5 gap-4 mb-6">
        <div class="bg-white rounded-lg shadow p-4">
            <div class="flex items-center">
                <div class="p-3 rounded-full bg-blue-100 text-blue-500">
                    <i class="fas fa-lightbulb"></i>
                </div>
                <div class="ml-4">
                    <p class="text-sm font-medium text-gray-500">总线索数</p>
                    <p class="text-2xl font-semibold">{{ stats.total }}</p>
                </div>
            </div>
        </div>
        <div class="bg-white rounded-lg shadow p-4">
            <div class="flex items-center">
                <div class="p-3 rounded-full bg-green-100 text-green-500">
                    <i class="fas fa-user-clock"></i>
                </div>
                <div class="ml-4">
                    <p class="text-sm font-medium text-gray-500">新线索</p>
                    <p class="text-2xl font-semibold">{{ stats.new }}</p>
                </div>
            </div>
        </div>
        <div class="bg-white rounded-lg shadow p-4">
            <div class="flex items-center">
                <div class="p-3 rounded-full bg-yellow-100 text-yellow-500">
                    <i class="fas fa-user-check"></i>
                </div>
                <div class="ml-4">
                    <p class="text-sm font-medium text-gray-500">跟进中</p>
                    <p class="text-2xl font-semibold">{{ stats.following }}</p>
                </div>
            </div>
        </div>
        <div class="bg-white rounded-lg shadow p-4">
            <div class="flex items-center">
                <div class="p-3 rounded-full bg-purple-100 text-purple-500">
                    <i class="fas fa-user-tag"></i>
                </div>
                <div class="ml-4">
                    <p class="text-sm font-medium text-gray-500">已转化</p>
                    <p class="text-2xl font-semibold">{{ stats.converted }}</p>
                </div>
            </div>
        </div>
        <div class="bg-white rounded-lg shadow p-4">
            <div class="flex items-center">
                <div class="p-3 rounded-full bg-red-100 text-red-500">
                    <i class="fas fa-user-times"></i>
                </div>
                <div class="ml-4">
                    <p class="text-sm font-medium text-gray-500">已关闭</p>
                    <p class="text-2xl font-semibold">{{ stats.closed }}</p>
                </div>
            </div>
        </div>
    </div>

    <!-- 操作区域 -->
    <div class="bg-white rounded-lg shadow mb-6">
        <div class="p-4 border-b border-gray-200">
            <div class="flex flex-col md:flex-row md:items-center md:justify-between">
                <div class="flex items-center space-x-2 mb-4 md:mb-0">
                    <a href="{{ url_for('lead.create_lead') }}" class="px-4 py-2 bg-primary text-white rounded-md hover:bg-blue-600 transition">
                        <i class="fas fa-plus mr-2"></i>添加线索
                    </a>
                    <button class="px-4 py-2 bg-white border border-gray-300 text-gray-700 rounded-md hover:bg-gray-50 transition">
                        <i class="fas fa-file-import mr-2"></i>批量导入
                    </button>
                    <button class="px-4 py-2 bg-white border border-gray-300 text-gray-700 rounded-md hover:bg-gray-50 transition">
                        <i class="fas fa-file-export mr-2"></i>批量导出
                    </button>
                </div>
                <div class="flex items-center space-x-2">
                    <div class="relative">
                        <input type="text" id="search" placeholder="搜索线索名称、公司、电话、邮箱..." 
                               class="pl-10 pr-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
                               value="{{ search }}">
                        <div class="absolute left-3 top-2.5 text-gray-400">
                            <i class="fas fa-search"></i>
                        </div>
                    </div>
                    <button id="search-btn" class="px-4 py-2 bg-primary text-white rounded-md hover:bg-blue-600 transition">
                        搜索
                    </button>
                </div>
            </div>
        </div>

        <!-- 筛选区域 -->
        <div class="p-4 border-b border-gray-200">
            <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">线索来源</label>
                    <select id="source-filter" class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
                        <option value="">全部来源</option>
                        {% for source in sources %}
                        <option value="{{ source }}" {% if source_filter == source %}selected{% endif %}>{{ source }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">线索状态</label>
                    <select id="status-filter" class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
                        <option value="">全部状态</option>
                        {% for status in statuses %}
                        <option value="{{ status }}" {% if status_filter == status %}selected{% endif %}>{{ status }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">负责人</label>
                    <select id="manager-filter" class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
                        <option value="">全部负责人</option>
                        {% for manager in managers %}
                        <option value="{{ manager.id }}" {% if manager_filter == manager.id|string %}selected{% endif %}>{{ manager.name }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">优先级</label>
                    <select id="priority-filter" class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
                        <option value="">全部优先级</option>
                        {% for priority in priorities %}
                        <option value="{{ priority }}" {% if priority_filter == priority %}selected{% endif %}>{{ priority }}</option>
                        {% endfor %}
                    </select>
                </div>
            </div>
            <div class="mt-4 flex justify-end">
                <button id="filter-btn" class="px-4 py-2 bg-primary text-white rounded-md hover:bg-blue-600 transition">
                    查询
                </button>
                <button id="reset-btn" class="ml-2 px-4 py-2 bg-white border border-gray-300 text-gray-700 rounded-md hover:bg-gray-50 transition">
                    重置
                </button>
            </div>
        </div>

        <!-- 销售线索列表表格 -->
        <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200">
                <thead class="bg-gray-50">
                    <tr>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            <input type="checkbox" id="select-all" class="rounded border-gray-300 text-primary focus:ring-primary">
                        </th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            线索名称
                        </th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            公司名称
                        </th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            线索来源
                        </th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            线索状态
                        </th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            优先级
                        </th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            负责人
                        </th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            最后跟进时间
                        </th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            操作
                        </th>
                    </tr>
                </thead>
                <tbody class="bg-white divide-y divide-gray-200">
                    {% for lead in leads %}
                    <tr>
                        <td class="px-6 py-4 whitespace-nowrap">
                            <input type="checkbox" class="lead-checkbox rounded border-gray-300 text-primary focus:ring-primary" value="{{ lead.id }}">
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap">
                            <div>
                                <div class="text-sm font-medium text-gray-900">
                                    <a href="{{ url_for('lead.lead_detail', lead_id=lead.id) }}" class="hover:text-primary">{{ lead.name }}</a>
                                </div>
                                <div class="text-sm text-gray-500">{{ lead.phone }}</div>
                            </div>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                            {{ lead.company }}
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                            {{ lead.source }}
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap">
                            <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full 
                                {% if lead.status == '新线索' %}bg-green-100 text-green-800
                                {% elif lead.status == '跟进中' %}bg-yellow-100 text-yellow-800
                                {% elif lead.status == '已转化' %}bg-blue-100 text-blue-800
                                {% elif lead.status == '已关闭' %}bg-red-100 text-red-800
                                {% else %}bg-gray-100 text-gray-800{% endif %}">
                                {{ lead.status }}
                            </span>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap">
                            <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full 
                                {% if lead.priority == '高' %}bg-red-100 text-red-800
                                {% elif lead.priority == '中' %}bg-yellow-100 text-yellow-800
                                {% elif lead.priority == '低' %}bg-green-100 text-green-800
                                {% else %}bg-gray-100 text-gray-800{% endif %}">
                                {{ lead.priority }}
                            </span>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                            {{ lead.manager.name if lead.manager else '未分配' }}
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                            {% if lead.followups %}
                                {{ lead.followups[0].created_at | format_time }}
                            {% else %}
                                暂无跟进
                            {% endif %}
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                            <div class="flex space-x-2">
                                <a href="{{ url_for('lead.lead_detail', lead_id=lead.id) }}" class="text-primary hover:text-blue-600">
                                    <i class="fas fa-eye"></i>
                                </a>
                                <a href="{{ url_for('lead.lead_edit', lead_id=lead.id) }}" class="text-indigo-600 hover:text-indigo-900">
                                    <i class="fas fa-edit"></i>
                                </a>
                                {% if not lead.converted_to_customer_id %}
                                <a href="{{ url_for('lead.lead_convert', lead_id=lead.id) }}" class="text-purple-600 hover:text-purple-900" title="转化为客户">
                                    <i class="fas fa-exchange-alt"></i>
                                </a>
                                {% endif %}
                                <button class="delete-lead text-red-600 hover:text-red-900" data-id="{{ lead.id }}" data-name="{{ lead.name }}">
                                    <i class="fas fa-trash"></i>
                                </button>
                            </div>
                        </td>
                    </tr>
                    {% else %}
                    <tr>
                        <td colspan="9" class="px-6 py-4 text-center text-sm text-gray-500">
                            暂无销售线索数据
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>

        <!-- 分页 -->
        <div class="bg-white px-4 py-3 flex items-center justify-between border-t border-gray-200 sm:px-6">
            <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
                <div>
                    <p class="text-sm text-gray-700">
                        显示 <span class="font-medium">{{ (page - 1) * per_page + 1 }}</span> 到 <span class="font-medium">{{ [page * per_page, stats.total]|min }}</span> 条，
                        共 <span class="font-medium">{{ stats.total }}</span> 条记录
                    </p>
                </div>
                <div>
                    <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
                        {% if page > 1 %}
                        <a href="{{ url_for('lead.lead_list', page=page-1, **request.args) }}" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
                            <span class="sr-only">上一页</span>
                            <i class="fas fa-chevron-left"></i>
                        </a>
                        {% else %}
                        <span class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-gray-100 text-sm font-medium text-gray-400">
                            <span class="sr-only">上一页</span>
                            <i class="fas fa-chevron-left"></i>
                        </span>
                        {% endif %}
                        
                        {% for p in range([1, page-2]|max, [total_pages+1, page+3]|min) %}
                        {% if p == page %}
                        <span class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-primary text-sm font-medium text-white">
                            {{ p }}
                        </span>
                        {% else %}
                        <a href="{{ url_for('lead.lead_list', page=p, **request.args) }}" class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">
                            {{ p }}
                        </a>
                        {% endif %}
                        {% endfor %}
                        
                        {% if page < total_pages %}
                        <a href="{{ url_for('lead.lead_list', page=page+1, **request.args) }}" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
                            <span class="sr-only">下一页</span>
                            <i class="fas fa-chevron-right"></i>
                        </a>
                        {% else %}
                        <span class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-gray-100 text-sm font-medium text-gray-400">
                            <span class="sr-only">下一页</span>
                            <i class="fas fa-chevron-right"></i>
                        </span>
                        {% endif %}
                    </nav>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 删除确认模态框 -->
<div id="delete-modal" class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full hidden">
    <div class="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white">
        <div class="mt-3 text-center">
            <div class="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-red-100">
                <i class="fas fa-exclamation-triangle text-red-600"></i>
            </div>
            <h3 class="text-lg leading-6 font-medium text-gray-900 mt-4">删除销售线索</h3>
            <div class="mt-2 px-7 py-3">
                <p class="text-sm text-gray-500">
                    确定要删除销售线索 "<span id="delete-lead-name"></span>" 吗？此操作不可撤销。
                </p>
            </div>
            <div class="items-center px-4 py-3">
                <form id="delete-form" method="post">
                    <input type="hidden" id="delete-lead-id" name="lead_id">
                    <button type="button" id="cancel-delete" class="px-4 py-2 bg-gray-300 text-gray-800 text-base font-medium rounded-md w-24 mr-2 hover:bg-gray-400">
                        取消
                    </button>
                    <button type="submit" class="px-4 py-2 bg-red-600 text-white text-base font-medium rounded-md w-24 hover:bg-red-700">
                        删除
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>

{% endblock %}

{% block extra_js %}
{{ super() }}
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // 搜索功能
        const searchBtn = document.getElementById('search-btn');
        const searchInput = document.getElementById('search');
        
        searchBtn.addEventListener('click', function() {
            const searchValue = searchInput.value.trim();
            const url = new URL(window.location.href);
            if (searchValue) {
                url.searchParams.set('search', searchValue);
            } else {
                url.searchParams.delete('search');
            }
            window.location.href = url.toString();
        });
        
        // 筛选功能
        const filterBtn = document.getElementById('filter-btn');
        const resetBtn = document.getElementById('reset-btn');
        const sourceFilter = document.getElementById('source-filter');
        const statusFilter = document.getElementById('status-filter');
        const managerFilter = document.getElementById('manager-filter');
        const priorityFilter = document.getElementById('priority-filter');
        
        filterBtn.addEventListener('click', function() {
            const url = new URL(window.location.href);
            
            // 保留搜索参数
            const searchValue = searchInput.value.trim();
            if (searchValue) {
                url.searchParams.set('search', searchValue);
            } else {
                url.searchParams.delete('search');
            }
            
            // 设置筛选参数
            if (sourceFilter.value) {
                url.searchParams.set('source', sourceFilter.value);
            } else {
                url.searchParams.delete('source');
            }
            
            if (statusFilter.value) {
                url.searchParams.set('status', statusFilter.value);
            } else {
                url.searchParams.delete('status');
            }
            
            if (managerFilter.value) {
                url.searchParams.set('manager', managerFilter.value);
            } else {
                url.searchParams.delete('manager');
            }
            
            if (priorityFilter.value) {
                url.searchParams.set('priority', priorityFilter.value);
            } else {
                url.searchParams.delete('priority');
            }
            
            window.location.href = url.toString();
        });
        
        resetBtn.addEventListener('click', function() {
            // 重置所有筛选条件
            sourceFilter.value = '';
            statusFilter.value = '';
            managerFilter.value = '';
            priorityFilter.value = '';
            searchInput.value = '';
            
            // 跳转到基础URL
            window.location.href = "{{ url_for('lead.lead_list') }}";
        });
        
        // 删除确认模态框
        const deleteModal = document.getElementById('delete-modal');
        const deleteLeadName = document.getElementById('delete-lead-name');
        const deleteLeadId = document.getElementById('delete-lead-id');
        const deleteForm = document.getElementById('delete-form');
        const cancelDelete = document.getElementById('cancel-delete');
        
        document.querySelectorAll('.delete-lead').forEach(button => {
            button.addEventListener('click', function() {
                const leadId = this.getAttribute('data-id');
                const leadName = this.getAttribute('data-name');
                
                deleteLeadId.value = leadId;
                deleteLeadName.textContent = leadName;
                
                // 设置表单提交URL
                deleteForm.action = `/lead/${leadId}/delete`;
                
                deleteModal.classList.remove('hidden');
            });
        });
        
        cancelDelete.addEventListener('click', function() {
            deleteModal.classList.add('hidden');
        });
        
        // 点击模态框外部关闭
        deleteModal.addEventListener('click', function(e) {
            if (e.target === deleteModal) {
                deleteModal.classList.add('hidden');
            }
        });
        
        // 全选功能
        const selectAll = document.getElementById('select-all');
        const leadCheckboxes = document.querySelectorAll('.lead-checkbox');
        
        selectAll.addEventListener('change', function() {
            leadCheckboxes.forEach(checkbox => {
                checkbox.checked = this.checked;
            });
        });
    });
</script>
{% endblock %}